<template>
  <div class="department">
    <FhSearch
      :search-from-config="searchFromConfig"
      @ResetClick="ResetClick"
      @QueryClick="QueryClick"
    ></FhSearch>
    <FhModalPage
      page-name="department"
      ref="modalRef"
      :defaultInfo="defaultInfo"
      :modal-config="modalConfigRef"
      :title="title"
    ></FhModalPage>
    <FhContentPage
      ref="contentRef"
      :content-table-config="contentTableConfig"
      page-name="department"
      @insertNewClick="insertNewClick"
      @EditClick="EditClick"
    ></FhContentPage>
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue'
import { defineComponent } from 'vue'
import FhSearch from '@/components/search-page'
import { searchFromConfig } from './config/search.config'
import FhContentPage from '@/components/content-page'
import { contentTableConfig } from './config/content.config'
import FhModalPage from '@/components/modal-page'
import { modalConfig } from './config/modal.config'
import { useModalPage } from '@/hooks/useModalPage'
import { useStore } from '@/store'
import { useSearchPage } from '@/hooks/useSearchPage'
export default defineComponent({
  components: {
    FhSearch,
    FhContentPage,
    FhModalPage
  },
  name: 'department',
  setup() {
    const title = ref('')
    // 处理新建或者编辑时是否显示密码的input
    const insertNewCallBack = () => {
      title.value = '新建部门'
    }
    const editCallBack = () => {
      title.value = '编辑部门'
    }

    const { contentRef, ResetClick, QueryClick } = useSearchPage()

    // modal配置信息
    const store = useStore()
    const modalConfigRef = computed(() => {
      const parentIdItem = modalConfig.formItems?.find(
        (item) => item.field === 'parentId'
      )

      parentIdItem!.options = store.state.allDepartment.map((item) => {
        return { title: item.name, value: item.id }
      })
      return modalConfig
    })

    const { modalRef, EditClick, insertNewClick, defaultInfo } = useModalPage(
      insertNewCallBack,
      editCallBack
    )

    return {
      title,
      searchFromConfig,
      contentTableConfig,
      modalConfigRef,
      modalRef,
      defaultInfo,
      insertNewClick,
      EditClick,
      contentRef,
      ResetClick,
      QueryClick
    }
  }
})
</script>

<style scoped></style>
